$(document).ready(function () {
    var maxTags = 5; // 最多可选择的标签数量
    window.selectedTags=[];
    // 页面刚初始化就触发默认展示事件
    let $tagClickItem = $(".tag-click-item");
    $tagClickItem.addClass("tag-selector-click");
    var id = $tagClickItem.data("id");
    $("div[data-parent-id='" + id + "']").show();

    //检测父级标签点击情况
    $(".tag-parent").click(function () {
        $(".tag-parent").removeClass("tag-selector-click tag-selector-cancel");
        $(this).addClass("tag-selector-click");
        $(".tag-parent").not(this).addClass("tag-selector-cancel");
    });

    $(".tag-parent").click(function () {
        var id = $(this).data("id");
        $(".tag-child-show").hide();
        $("div[data-parent-id='" + id + "']").show();
    });

    $(".tag-child").click(function () {
        var tag = $(this).text();
        if (selectedTags.length >= maxTags) {
            $("#tag-limit-message").text("最多只能选择 " + maxTags + " 个标签").css("color", "red");
            return;
        }
        if (selectedTags.includes(tag)) {
            return;
        }

        selectedTags.push(tag);

        var dataTagId = $(this).data("tag-id")
        var dataId = $(this).data("id")
        var spanElement = $("<span>")
            .addClass("button is-small is-light tag-child-selector")
            .attr("data-tag-id", dataTagId)
            .attr("data-id",dataId)
            .text(tag);
        var deleteButton = $("<span>").addClass("tag-remove-icon").text("X");
        spanElement.append(deleteButton);

        $("#input-tags").append(spanElement);

        $(this).addClass("is-info is-focused");

        // 清除标签数量限制的提示信息
        $("#tag-limit-message").text("").css("color", "");
    });

    $(document).on("click", ".tag-remove-icon", function () {
        // 获取要删除的标签文本
        var tag = $(this).parent().clone().children().remove().end().text().trim();
        var index = selectedTags.indexOf(tag);
        if (index > -1) {
            selectedTags.splice(index, 1);
        }
        $(this).parent().remove();

        var dataTagId = $(this).parent().data("tag-id");
        $("span[data-tag-id='" + dataTagId + "']").removeClass("is-info is-focused");
        // 清除标签数量限制的提示信息
        $("#tag-limit-message").text("").css("color", "");
    });

});


